import { useState, useEffect } from "react"
import { RightOutlined, DownOutlined } from '@ant-design/icons'
import Avatar from "./Avatar"

export default function RelevantResult ({ list }) {

    const [openToggle, setOpenToggle] = useState(() => (false))

    const listHelper = (list) => {
        if (Array.isArray(list)) {
            return list.slice(0, 6).map(({ name, note, url, avatarUrl }) => {
                return {
                    name,
                    note,
                    url,
                    avatarUrl,
                }
            })
        }
        
        return []
    }

    const [currentList, setCurrentList] = useState(() => ([]))

    const handleOpenToggle = () => {
        setOpenToggle((prevState) => {
            if (!prevState) {
                setCurrentList(() => (list.map(({ name, note, url, avatarUrl }) => {
                    return {
                        name,
                        note,
                        url,
                        avatarUrl,
                    }
                }))) 
            }

            if (prevState) {
                setCurrentList(() => (list.slice(0, 6).map(({ name, note, url, avatarUrl }) => {
                    return {
                        name,
                        note,
                        url,
                        avatarUrl,
                    }
                })))
            }

            return !prevState
        })
    }

    useEffect(() => {
        setCurrentList(() => (listHelper(list)))
    }, [list])

    return (
        <div className="w-[270px]">
            <div className="flex justify-between">
                <div>
                    <span className="text-sm">
                        相关人员
                    </span>
                </div>
                {list.length > 6
                    ? (
                        <div className="flex cursor-pointer" onClick={handleOpenToggle}>
                            <div>
                                <span className="text-sm">
                                    {openToggle ? '收起' : '展开'}
                                </span>
                            </div>
                            <div className="ml-[0.5em]">
                                { openToggle
                                    ? (
                                        <DownOutlined style={{ fontSize: '12px', color: '#34b7b9' }}/>
                                    )
                                    : (
                                        <RightOutlined style={{ fontSize: '12px', color: '#34b7b9'}}/>
                                    )
                                }
                            </div>
                        </div>
                    )
                    : null
                }
            </div>
            <div className="flex flex-wrap gap-6 my-4">
                {currentList.map(({ name, note, url, avatarUrl }, index) => {
                    return (
                        <div key={index}>
                            <Avatar 
                                size={70} 
                                name={name} 
                                note={note} 
                                url={url}
                                avatarUrl={avatarUrl}
                            />
                        </div>
                    )
                })}
            </div>
        </div>
    )
}